iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

Scratch 3 從入門到精通系列 第 39

Day39 ( 遊戲設計 ) 青蛙過河

  • 分享至 

  • xImage
  •  

青蛙過河

教學原文參考:青蛙過河

這篇文章會介紹,如何在 Scratch 3 裡使用多個角色,搭配重複、偵測碰到其他角色、定位、函式...等積木,實作一個青蛙過河的小遊戲 ( 鍵盤控制青蛙移動,踩在漂浮的木頭上通過河流 )。

相關文章參考:定位重複偵測碰到其他角色函式

角色設定

在角色編輯區,刪除貓咪角色,加入「青蛙」角色,使用「繪畫」功能,加入「木頭」和「河流」兩個空白角色 ( 參考:Scratch 角色設定 )。

Scratch 3 教學 - 青蛙過河

點選「青蛙」角色,切換「造型」頁籤,刪除青蛙的舌頭,避免突出的舌頭造成判斷錯誤,並將「高度」調整為 30,對齊畫布中心。

為什麼高度要設定為 30 呢?因為待會青蛙會採用 40 為單位進行上下移動,為了畫面美觀以及避免超過範圍造成判斷錯誤,所以使用 30。

Scratch 3 教學 - 青蛙過河

點選「木頭」角色,切換「造型」頁籤,使用方形工具,畫出兩個咖啡色的木頭造型,比較大的造型 ( 名稱 200 ) 尺寸設定為 200x38,比較小的造型 ( 名稱 100 ) 尺寸設定為 100x38,對齊畫布中心。

為什麼高度要設定為 38 呢?因為待會青蛙會採用 40 為單位進行上下移動,為了畫面美觀,保留木頭之間會有一點縫隙可以看到下方的河流,所以使用 38。

Scratch 3 教學 - 青蛙過河

點選「河流」角色,,切換「造型」頁籤,使用方形工具,畫出藍色的河流造型,尺寸設定為 480x280,對齊畫布中心。

為什麼高度要設定為 280 呢?因為待會青蛙會採用 40 為單位進行上下移動,需要保留最上方和最下方的空間,讓青蛙有出發和抵達的位置。

Scratch 3 教學 - 青蛙過河

積木程式原理 ( 河流 )

點擊「河流」角色,設定點擊綠旗的時候,將河流移動到最下層,避免遮住青蛙或木頭。

Scratch 3 教學 - 青蛙過河

完成後,點擊綠旗,舞台區裡應該可以看見下圖的畫面。

Scratch 3 教學 - 青蛙過河

積木程式原理 ( 木頭 )

點擊「木頭」角色,設計出「許多木頭在河流上漂動」的效果,首先編輯點擊綠旗的程式:

  • 當綠旗被點擊時,隱藏本尊。
  • 定位到舞台右側下方 ( 324=240+100-16,-120 表示在貼近河流的下緣 )
  • 使用重複七次積木,建立七個分身,每個分身向上移動 40 點,建立後更換造型。

由於角色在舞台邊界時,會在舞台上突出 15 點,所以計算最邊界的座標,使用邊界值 ( 240 ) 加上角色的一半寬 ( 200/2=100 ) 在減掉 16 ( 為了讓判斷更準確,使用 16 ) 之後,就是角色在邊界的座標位置

Scratch 3 教學 - 青蛙過河

新增一個名為「往右移」的函式,負責「短木頭」往右移動的程式:

  • 使用重複無限次積木,每次重複時執行:
    • 顯示分身、並將 x 改變 2 ( 往右移動 )。
    • 判斷如果 x 座標大於 273,將分身隱藏,移動回舞台左側 ( -274 )
    • 等待 0.1~1 秒後再次重複。
    • 判斷如果碰到青蛙角色,新增變數 x 設定為 2 ( 新增變數 x 可以控制青蛙角色的移動 )。

因為短木頭的長度為 100,所以角色在邊界的座標為 -240-50+16240+50-16

Scratch 3 教學 - 青蛙過河

新增一個名為「往左移」的函式,負責「長木頭」往右移動的程式:

  • 使用重複無限次積木,每次重複時執行:
    • 顯示分身、並將 x 改變 -2 ( 往左移動 )。
    • 判斷如果 x 座標小於 -323,將分身隱藏,移動回舞台右側 ( 324 )
    • 等待 0.1~1 秒後再次重複。
    • 判斷如果碰到青蛙角色,新增變數 x 設定為 -2 ( 新增變數 x 可以控制青蛙角色的移動 )。

因為長木頭的長度為 200,所以角色在邊界的座標為 -240-100+16240+100-16

Scratch 3 教學 - 青蛙過河

設定分身產生時的動作:

  • 等待 0.1~3 秒後,再執行移動的程式。
  • 判斷如果造型名稱是 200 ( 長木頭 ),執行「往左移」函式。
  • 判斷如果造型名稱不是 200 ( 表示是 100 短木頭 ),執行「往右移」函式。

為什麼要使用 0.1 呢?如果隨機數使用 0~3,數值只會有 0、1、2、3 的整數,如果使用小數點,就可以有 0.1、0.2...等的小數點隨機數

Scratch 3 教學 - 青蛙過河

完成後,點擊綠旗,木頭就會開始在水上漂動,長木頭往左漂,短木頭往右漂。

Scratch 3 教學 - 青蛙過河

積木程式原理 ( 青蛙 )

點擊「青蛙」角色,編輯點擊綠旗的程式:

  • 將青蛙移動到最上層,避免被木頭或河流遮住。
  • 定位到舞台中間下方 ( 0, -160 )。
  • 使用重複無限次積木,每次重複執行:
    • 新增變數 ok,設定為 1。
    • 判斷如果碰到木頭角色,就將青蛙的 x 座標改變為 x 變數的數值,因為 x 變數會依據木頭的方向而有所不同,青蛙只要碰到木頭,就會跟隨木頭移動
    • 接著再判斷如果掉到河裡 ( 碰到河但是沒有碰到木頭 ),將 ok 設定為 0,亮度設定為 80,講出「oh!!!」持續兩秒,兩秒後恢復原本的亮度,移動回舞台中間下方。

Scratch 3 教學 - 青蛙過河

新增另外一組點擊綠旗的程式,負責青蛙的左右移動:

  • 使用重複無限次積木。
  • 每次重複時,等待直到變數 ok 等於 1 再繼續 ( 因為如果掉到河裡時會讓 ok 等於 0,不能進行移動 )
  • 如果按下向左鍵,將 x 座標減少 2 ( 往左移動 )。
  • 如果按下向右鍵,將 x 座標增加 2 ( 往右移動 )。

Scratch 3 教學 - 青蛙過河

再度新增另外一組點擊綠旗的程式,負責青蛙的上下移動:

  • 使用重複無限次積木。
  • 每次重複時,等待直到變數 ok 等於 1 再繼續 ( 因為如果掉到河裡時會讓 ok 等於 0,不能進行移動 )
  • 如果按下向下鍵,將 y 座標減少 40 ( 往下移動 ),判斷如果 y 座標小於 -160,就將 y 座標設定為 -160,避免超過畫面造成座標不是以 40 為單位移動
  • 等待直到放開向下鍵再繼續,避免按下鍵盤時發生連續按壓的狀況。
  • 如果按下向上鍵,將 y 座標增加 40 ( 往上移動 ),判斷如果 y 座標大於 160,就將 y 座標設定為 160,避免超過畫面造成座標不是以 40 為單位移動
  • 等待直到放開向下鍵再繼續,避免按下鍵盤時發生連續按壓的狀況。

Scratch 3 教學 - 青蛙過河

完成後,點擊綠旗,就可以開始進行青蛙過河的遊戲。

Scratch 3 教學 - 青蛙過河

加入吃蘋果機制

在角色面板裡,增加一個 Apple 角色。

Scratch 3 教學 - 青蛙過河

切換到造型頁籤,將尺寸調整為 30x30,對齊畫布中心。

Scratch 3 教學 - 青蛙過河

點擊「青蛙」角色,在第一組點擊綠旗程式裡,加入碰到 Apple 的判斷,如果碰到 Apple,將青蛙移動回舞台中間下方 (0, -160),並發送 eat 訊息。

Scratch 3 教學 - 青蛙過河

點擊「Apple」角色,設定點擊綠旗時,將 Apple 定位在舞台中間上方 (0, 160),如果收到 eat 訊息,將 x 座標設定為 -220~220 的隨機數

Scratch 3 教學 - 青蛙過河

完成效果

完成後,點擊綠旗,就可以開始進行青蛙過河吃蘋果的遊戲。

Scratch 3 教學 - 青蛙過河

範例解答

範例解答:青蛙過河

延伸練習

如果已經熟悉了青蛙過河的原理,還可以嘗試更多好玩的作法:

  • 加上「計時與計分」的機制。( 解答 )

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day38 ( 遊戲設計 ) 狙擊氣球 ( 兩倍變焦 )
下一篇
Day40 ( 遊戲設計 ) 反彈球 ( 乒乓球 )
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言